<!-- 入驻 -->
<template>
  <div class="h5bg">
    <div class="h5logo">
      <img src="https://mmkappnew.oss-cn-beijing.aliyuncs.com/mshare/h5/logo%402x.png">
      <span>申请加盟商户</span>
    </div>
    <p>加入我们的电商平台，成为我们的供应商，一起共创美好未来</p>

    <div class="h5_form">
      <el-form label-width="90px" ref="info" :model="info">
        <el-form-item label="手机号" prop="phone" :rules="[{required:true,message:'手机号不能为空',trigger: 'blur' }]">
          <el-input type="tel" maxlength="11" placeholder="请输入" v-model="info.phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" :rules="[{required:true,message:'验证码不能为空',trigger: 'blur' }]">
          <el-row>
            <el-col :span="12">
              <el-input placeholder="请输入" v-model="info.code"></el-input>
            </el-col>
            <el-col :span="4" :offset="2">
              <el-button type="danger" plain @click="submitCode">{{codeTip}}</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{required:true,message:'密码不能为空',trigger: 'blur' }]">
          <el-input type="password" placeholder="请输入" v-model="info.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirm_password" :rules="[{required:true,message:'确认密码不能为空',trigger: 'blur' }]">
          <el-input type="password" placeholder="请输入" v-model="info.confirm_password"></el-input>
        </el-form-item>
        <el-form-item label="商户类型" prop="store_class_id" :rules="[{required:true,message:'请选择商户类型',trigger: 'blur' }]">
          <el-select v-model="info.store_class_id" placeholder="请选择商户类型">
            <el-option label="医美" :value="1"></el-option>
            <el-option label="生美" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户真实全称" prop="store_name" :rules="[{required:true,message:'商户真实全称不能为空',trigger: 'blur' }]">
          <el-input placeholder="请输入" v-model="info.store_name"></el-input>
        </el-form-item>
        <el-form-item label="预约电话" prop="appointment_phone" :rules="[{required:true,message:'预约电话不能为空',trigger: 'blur' }]">
          <el-input type="tel" maxlength="11" placeholder="请输入内容" v-model="info.appointment_phone"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="area_info" :rules="[{required:true,message:'地区不能为空',trigger: 'blur' }]">
          <el-cascader ref="cascader" @focus="clearData" clearable v-model="info.area_info" :props="props" :options="area_list"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="store_address" :rules="[{required:true,message:'公司详细地址不能为空',trigger: 'blur' }]">
          <el-input type="textarea" placeholder="请输入内容" v-model="info.store_address"></el-input>
        </el-form-item>
        <el-form-item label="企业官网" prop="website">
          <el-input type="url" placeholder="请输入内容" v-model="info.website"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="ml_130" type="danger" @click="submitForm('info')">申请加盟</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: {
        area_info: [],
        phone: '',
        code: '',
        password: '',
        confirm_password: '',
        store_class_id: '',
        store_name: '',
        appointment_phone: '',
        store_address: '',
        website: '',
        province_id: '',
        city_id: '',
        region_id: '',
      },
      area_list: [],
      // 省市区动态加载
      props: {
        value: 'area_id',
        label: 'name',
      },
      codeTip: "发送验证码",
      codeFlag: true,
    };
  },

  components: {},
  created() {
    this.judgeOs();
  },

  mounted() {
    this.get_area_list();
  },

  methods: {
    get_area_list: function () {
      this.$get(this.$api.sellerGetAreaList).then(res => {
        this.area_list = res.data;
      });
    },
    submitCode() {
      if (!(/^1[3456789]\d{9}$/.test(this.info.phone))) return this.$message.error("请填写正确手机号");

      if (this.codeFlag) {
        this.codeFlag = false;
        let codeTip = 60;
        this.$post(this.$api.sendJoinSms, { phone: this.info.phone }).then(res => {
          if (res.code == 200) {
            this.$message.success("发送成功");
            const timer = setInterval(() => {
              this.codeTip = (--codeTip) + 's重新获取';
              if (codeTip == 0) {
                clearInterval(timer);
                this.codeFlag = true;
                this.codeTip = "发送验证码";
              }
            }, 1000);
            this.$once('hook:beforeDestroy', () => {
              clearInterval(timer);
            })
          } else {
            this.$message.error(res.msg);
            this.codeFlag = true;
          }
        });
      }
    },
    // 分割省市区
    cutArea(areaArr) {
      return {
        province_id: areaArr[0],
        city_id: areaArr[1],
        region_id: areaArr[2],
      }
    },
    // 清空选中数据
    clearData() {
      const _cascader = this.$refs.cascader;
      if (_cascader) {
        _cascader.$refs.panel.checkedValue = []
        _cascader.$refs.panel.activePath = []
        _cascader.$refs.panel.syncActivePath();
      }
    },
    submitForm(e) {
      this.$refs[e].validate(res => {
        if (res) {
          if (this.info.password !== this.info.confirm_password) return this.$message.error("两次密码不一样");
          Object.assign(this.info, this.cutArea(this.info.area_info));
          console.log(this.info);
          // Http 请求
          this.$post(this.$api.sellerJoin, this.info).then(postRes => {
            if (postRes.code == 200) {
              this.$message.success("申请成功");
              setTimeout(() => {
                this.$router.push("/Seller/login");
              }, 500);
            } else {
              this.$message.error("申请失败：" + postRes.msg);
            }
          });
        }
      });
    },
    // 判断系统
    judgeOs() {
      var os = function () {
        var ua = navigator.userAgent,
          isWindowsPhone = /(?:Windows Phone)/.test(ua),
          isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
          isAndroid = /(?:Android)/.test(ua),
          isFireFox = /(?:Firefox)/.test(ua),
          isChrome = /(?:Chrome|CriOS)/.test(ua),
          isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
          isPhone = /(?:iPhone)/.test(ua) && !isTablet,
          isPc = !isPhone && !isAndroid && !isSymbian;

        return {
          isTablet: isTablet,
          isPhone: isPhone,
          isAndroid: isAndroid,
          isPc: isPc
        };
      }();
      if (os.isPc) {
        this.$router.push("/Seller/join");
      }
      // location.replace('http://www.baidu.com');
      if (os.isAndroid || os.isPhone) {
        return;
      } else if (os.isTablet) {
        this.$router.push("/Seller/join");
      }
    },
  }
}

</script>
<style  scoped>
.h5bg {
  width: 100%;
  padding-bottom: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
  background-image: linear-gradient(175deg, #ff4c92 0%, #ff3434 200%);
}
.h5logo {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 20px;
}
.h5logo img {
  width: 100px;
  margin: 0 auto;
  padding-left: 20px;
}
.h5logo span {
  width: 45%;
  margin: 0 auto;
  display: block;
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 26px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0px 2px 2px #ca143f;
}
.h5bg p {
  padding: 0 70px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
}
.h5_form {
  background: rgba(255, 255, 255, 0.5);
  width: 90%;
  border-radius: 2px;
  margin: 25px auto 52px;
}
.el-form {
  width: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
}
.el-select,
.el-cascader {
  width: 100%;
}
.ml_130 {
  margin-left: 30px;
}
</style>